import { Button, View } from "@tarojs/components";
import { https, $route } from "@utils/index";
import { useState } from "react";
import Protocol from "./Protocol";
import { GetPhoneNumberDetail } from "types/pages/mine/login";
import { useToast } from "taro-hooks";

const WeappLogin = (props) => {
  const { show } = useToast({ icon: "none" });
  // 是否阅读协议
  const [readProtocol, setReadProtocol] = useState(false);
  const getPhoneNumber = (e) => {
    if (!readProtocol) {
      show({ title: "请阅读并同意协议!" });
      return;
    }
    const detail: GetPhoneNumberDetail = e.detail;
    https
      .weappLogin(detail)
      .then(() => {
        // 登录成功后的操作，比如跳转到首页或者个人中心等页面
        return https.getUserInfo();
      })
      .then(() => {
        $route.back(); // 登录成功后返回上一页
      });
  };
  return (
    <View className="ml-[30px] mr-[30px] rounded-[10px] p-[30px]">
      {readProtocol ? (
        <Button
          openType="getPhoneNumber"
          onGetPhoneNumber={getPhoneNumber}
          className="bg-[#f60] h-[90px] rui-flex-cc text-[28px] border-0 text-[#fff] rounded-[50px]"
        >
          快捷登录
        </Button>
      ) : (
        <Button
          onClick={getPhoneNumber}
          className="bg-[#f60] h-[90px] rui-flex-cc text-[28px] border-0 text-[#fff] rounded-[50px]"
        >
          快捷登录
        </Button>
      )}

      <View
        onClick={props?.onChangeLoginType}
        className="mt-[30px] h-[90px] rui-flex-cc text-[28px] border-[2px] border-solid border-[#f60] box-border text-[#f60] rounded-[50px]"
      >
        手机号登录
      </View>
      <Protocol
        isRead={readProtocol}
        onChange={setReadProtocol.bind(null, !readProtocol)}
      />
    </View>
  );
};

export default WeappLogin;
